<template>
  <van-search v-model="value" placeholder="请输入搜索关键词"></van-search>
  <van-tabs v-model:active="active" sticky swipeable>
    <van-tab v-for="item in tab" :title="item.title" :key="item.index">
      <van-list
          :finished="finished"
          finished-text="没有更多了"
          @load="lookAllOrders(currentUser)"
      >
        <van-cell
            is-link
            v-for="i in item.data"
            :key="i.id"
            :title="i.description"
            @click="lookOrder(i)"
        >
          <van-icon name="passed" v-if="i.status === 1"/>
        </van-cell>
      </van-list>
    </van-tab>
  </van-tabs>
  <van-back-top/>
  <van-dialog
      v-model:show="orderDialogVisible"
      title="订单详情"
      :confirmButtonText="currentOrder.status === 0 ? '已收到' : '关闭'"
      :show-cancel-button="currentOrder.status === 0"
      @confirm="currentOrder.status === 0 ? orderYes(currentOrder) : ''"
  >
    <van-steps
        :active="
        this.currentOrder.status === 1
          ? 2
          : this.currentOrder.runner === '' || this.currentOrder.runner === null
          ? 0
          : 1
      "
        active-icon="success"
        active-color="#07c160"
    >
      <van-step>用户下单</van-step>
      <van-step>跑腿员接单</van-step>
      <van-step>用户收货</van-step>
    </van-steps>
    <van-cell-group>
      <van-cell
          :title="item.label"
          :value="item.data"
          v-for="item in orderDialog"
          :key="item.index"
          :label="item.des"
      />
    </van-cell-group>
  </van-dialog>
  <van-dialog
      v-model:show="insertDialogVisible"
      title="下单"
      confirmButtonText="下单"
      show-cancel-button
      @confirm="insertOrder(insertForm)"
  >
    <van-cell-group inset>
      <van-field
          v-model="insertForm.description"
          label="要求"
          placeholder="请输入您对订单的要求"
          :rules="orderRule.description"
          maxlength="50"
          rows="4"
          autosize
          type="textarea"
          show-word-limit
      />
    </van-cell-group>
  </van-dialog>
  <van-sticky position="bottom">
    <van-button icon="plus" type="primary" @click="insertDialogVisible = true"
    >下单
    </van-button
    >
  </van-sticky>
</template>

<script>
import {insertOneOrder, lookOrdersByCondition, updateOneOrder,} from "../api/order";
import {lookCurrentUser} from "../api/user";
import {showConfirmDialog, showToast} from "vant";

export default {
  data() {
    return {
      //所有订单数据
      table: [],
      //当前用户信息
      currentUser: {
        user: "",
      },
      //刷新是否完成
      finished: false,
      //订单详情弹窗
      orderDialogVisible: false,
      //下单弹窗
      insertDialogVisible: false,
      //订单
      order: {},
      //当前选中的订单数据
      currentOrder: {},
      //下单的数据
      insertForm: {
        user: "",
        description: "",
      },
      //订单详情弹窗配置
      orderDialog: [
        {
          index: 1,
          name: "id",
          label: "编号",
          des: "唯一标识",
          data: "",
        },
        {
          index: 2,
          label: "订单描述",
          name: "description",
          des: "用户要求",
          data: "",
        },
        {
          index: 3,
          label: "发起时间",
          name: "createTime",
          des: "用户发起订单时间",
          data: "",
        },
        {
          index: 3,
          label: "发起用户",
          name: "name",
          des: "使用了此账户进行订餐",
          data: "",
        },
        {
          index: 4,
          label: "收货地址",
          name: "addressInfo",
          des: "发起人所在位置",
          data: "",
        },
        {
          index: 5,
          label: "联系电话",
          name: "phone",
          des: "发起人电话",
          data: "",
        },
      ],
      //标签页配置
      tab: [
        {
          index: 1,
          title: "已下单",
          data: [],
          showLink: true,
        },
        {
          index: 2,
          title: "正在送货",
          data: [],
          showLink: false,
        },
        {
          index: 3,
          title: "已送达",
          data: [],
          showLink: false,
        },
      ],
      //表单校验
      orderRule: {
        description: [
          {
            required: true,
            message: "请输入订单描述!",
            trigger: "blur",
          },
        ],
        //跑腿员
        runner: [
          {
            required: true,
            message: "请选择跑腿员!",
            trigger: "blur",
          },
        ],
        //订单状态
        status: [
          {
            required: true,
            message: "请设置订单状态!",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.currentUser.user = sessionStorage.getItem("user");
  },
  methods: {
    //获取当前用户的订单
    lookAllOrders(user) {
      lookOrdersByCondition(user).then((req) => {
        this.table = req.data.data;
        //未完成
        var continued = [];
        //进行中
        var progress = [];
        //已完成
        var completed = [];
        for (var i = 0; i < this.table.length; i++) {
          //渲染未完成
          if ((this.table[i].status === 0) & (this.table[i].runner == null)) {
            continued.push(this.table[i]);
            console.log(`未完成:`);
            console.log(this.table[i]);
          }
          //渲染进行中
          if ((this.table[i].status === 0) & (this.table[i].runner != null)) {
            progress.push(this.table[i]);
            console.log(`进行中:`);
            console.log(this.table[i]);
          }
          //渲染已完成
          if (this.table[i].status === 1) {
            completed.push(this.table[i]);
            console.log(`已完成:`);
            console.log(this.table[i]);
          }
        }
        //加入标签数据
        this.tab[0].data = continued;
        this.tab[1].data = progress;
        this.tab[2].data = completed;
        this.finished = true;
      });
    },
    //打开弹窗时的附加操作
    lookOrder(data) {
      this.currentOrder = data;
      console.log(data);
      for (var i = 0; i < this.orderDialog.length - 3; i++) {
        this.orderDialog[i].data = data[this.orderDialog[i].name];
      }
      //获取当前用户信息
      lookCurrentUser(data.user).then((req) => {
        console.log(req.data.data);
        this.orderDialog[3].data = req.data.data[this.orderDialog[3].name];
        this.orderDialog[4].data = req.data.data[this.orderDialog[4].name];
        this.orderDialog[5].data = req.data.data[this.orderDialog[5].name];
      });
      this.orderDialogVisible = true;
    },
    //接单
    orderYes(data) {
      if (data.status === 1) {
        showToast("订单已完成!");
        return;
      }
      console.log(data);
      showConfirmDialog({
        title: "货到了吗?",
        message: "此操作将执行接收操作,请确保订单已完成!",
      }).then(() => {
        data.status = 1;
        updateOneOrder(data).then((req) => {
          if (req.data.success) {
            showToast("收货成功!感谢您的支持!");
            this.lookAllOrders(this.currentUser);
          } else {
            showToast("收货失败,请稍后再试!");
          }
        });
      });
    },
    //下单
    insertOrder(order) {
      showConfirmDialog({
        title: "请核对订单",
        message: "用户下单后无法更改,请确认订单准确无误!",
      }).then(() => {
        order.user = sessionStorage.getItem("user");
        insertOneOrder(order).then((req) => {
          if (req.data.success) {
            showToast("下单成功!请耐心等待");
            this.lookAllOrders(this.currentUser);
          } else {
            showToast("下单失败,请稍后再试!");
          }
        });
      });
    },
  },
};
</script>

<style>
</style>